<template>
	<view class="content">

		<view>
			<view class="tou">
				<view class="wenti">反馈类型： </view>
				<view class="feedbackYes">{{problem.title}}</view>
			</view>

			<view class="zhong">
				<view class="wenti">问题</view>
				<view class="shuruk yijian">{{problem.content}}</view>

				<view class="gui-margin-top" style="width: 100%; padding-left: 20rpx;"
					v-if="problem.imgs && problem.imgs.length > 0">
					<text class="gui-h4">图片</text>
					<view style="display: flex; flex-wrap: wrap;">
						<view class="" v-for="(item, index) in problem.imgs.split(',')"
							style="width: 141rpx; height: 100rpx; border-radius: 20rpx; margin: 20rpx 11rpx;"
							:key="index">
							<image @tap="show_img(item)" style="width: 100%; height: 100%;" :src="item" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>

			<view class="reply">
				<view class="wenti">回复</view>
				<view class="shuruk yijian">{{problem.reply}}</view>
			</view>

		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				problem: {},
				show_data: [{
						id: 1,
						title: '其他',
						content: '进入页面出现“user error”问题',
						reply: '出现“user error”问题时，进入“我的”页面点击“退出登录”后重新登录(怕忘记密码的请选择记住密码)即可解决',
						imgs: 'https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E9%A6%96%E9%A1%B5-%E6%88%91%E7%9A%84.png,https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E6%88%91%E7%9A%84-%E9%80%80%E5%87%BA%E7%99%BB%E5%BD%95.png,https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E7%99%BB%E5%BD%95-%E8%AE%B0%E4%BD%8F%E5%AF%86%E7%A0%81.png'
					},
					{
						id: 2,
						title: '其他',
						content: '进入页面空白',
						reply: '先尝试进入“我的”页面点击“设置”，找到“清除缓存”后点击，等待“清除成功!”的提示弹出后返回原先的空白页面查看，若该问题还未解决再尝试在“设置”页面“检查更新”后重新登录',
						imgs: 'https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E9%A6%96%E9%A1%B5-%E6%88%91%E7%9A%84.png,https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E6%88%91%E7%9A%84-%E8%AE%BE%E7%BD%AE.png,https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E8%AE%BE%E7%BD%AE-%E6%B8%85%E7%90%86%E7%BC%93%E5%AD%98.png,https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E8%AE%BE%E7%BD%AE-%E6%A3%80%E6%9F%A5%E6%9B%B4%E6%96%B0.png,https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E6%88%91%E7%9A%84-%E9%80%80%E5%87%BA%E7%99%BB%E5%BD%95.png,https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E7%99%BB%E5%BD%95-%E8%AE%B0%E4%BD%8F%E5%AF%86%E7%A0%81.png'
					},
					{
						id: 3,
						title: '其他',
						content: '如何查看app版本号',
						reply: '进入“我的”页面点击“设置”，版本号Ver显示在中部偏下方的位置',
						imgs: 'https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E9%A6%96%E9%A1%B5-%E6%88%91%E7%9A%84.png,https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E6%88%91%E7%9A%84-%E8%AE%BE%E7%BD%AE.png,https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E8%AE%BE%E7%BD%AE-%E7%89%88%E6%9C%AC%E5%8F%B7.png'
					},
					{
						id: 4,
						title: '其他',
						content: '如何检查更新',
						reply: '进入“我的”页面进入“设置”，点击“检查更新”之后会有相应的提示弹出，按照提示操作即可',
						imgs: 'https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E9%A6%96%E9%A1%B5-%E6%88%91%E7%9A%84.png,https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E6%88%91%E7%9A%84-%E8%AE%BE%E7%BD%AE.png,https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E8%AE%BE%E7%BD%AE-%E6%A3%80%E6%9F%A5%E6%9B%B4%E6%96%B0.png'
					},
					{
						id: 5,
						title: '其他',
						content: '如何清除缓存',
						reply: '进入“我的”页面进入“设置”，点击“清除缓存”后等待“清除成功!”的提示弹出即可',
						imgs: 'https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E9%A6%96%E9%A1%B5-%E6%88%91%E7%9A%84.png,https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E6%88%91%E7%9A%84-%E8%AE%BE%E7%BD%AE.png,https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E8%AE%BE%E7%BD%AE-%E6%B8%85%E7%90%86%E7%BC%93%E5%AD%98.png'
					},
					{
						id: 6,
						title: '其他',
						content: '首页头部导航背景与下方背景对应不上',
						reply: '进入“我的”页面进入“设置”后根据图片提示关闭预览版本即可',
						imgs: 'https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E9%A6%96%E9%A1%B5-%E6%88%91%E7%9A%84.png,https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E6%88%91%E7%9A%84-%E8%AE%BE%E7%BD%AE.png,https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E8%AE%BE%E7%BD%AE-%E8%93%9D%E8%89%B2%E9%A2%84%E8%A7%88.png,https://boyaltd.oss-cn-hangzhou.aliyuncs.com/new_app/activity/feedback/%E8%AE%BE%E7%BD%AE-%E7%99%BD%E8%89%B2%E9%A2%84%E8%A7%88.png'
					}
				],
				id: null,
				token: uni.getStorageSync("formerToken"),
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.get_list(opt.id);
		},
		methods: {
			show_loading() {
				uni.showLoading({
					title: '请稍候...'
				});
			},
			hide_loading() {
				uni.hideLoading();
			},
			get_list(id) {
				let self = this
				let list = self.show_data
				for (var i = 0; i < list.length; i++) {
					if (id == list[i].id) {
						self.problem = list[i]
					}
				}
			},
			show_img(url) {
				uni.previewImage({
					urls: [url],
					index: 0
				});
			},
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: url("https://boyaltd.oss-cn-hangzhou.aliyuncs.com/bj_liand.png") 100% 100% / 100% 100%;
	}

	.wenti {
		font-size: 35rpx;
		margin-top: 15rpx;
		margin-left: 18rpx;
	}

	.created {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 15rpx;
	}

	.created>view {
		display: flex;
		align-items: center;
	}

	.user_name,
	.created_at {
		padding: 15rpx;
	}

	.tou {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 5rpx 15rpx 15rpx 15rpx;
		display: flex;
		align-items: center;
	}

	.feedbackYes {
		width: 100rpx;
		padding: 16rpx 40rpx;
		margin: 20rpx 25rpx;
		font-size: 26rpx;
		border-radius: 50rpx;
		color: white;
		margin-top: 30rpx;
		background: linear-gradient(to right, #F55661, #F06C35);
	}

	.feedbackNo {
		background-color: #F5F6F9;
	}

	.zhong {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 15rpx;
	}

	.yijian {
		padding: 15rpx;
	}

	.xia {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 15rpx;
		padding: 20rpx;
	}

	.shoujih {
		height: 90rpx;
	}

	.shuruk {
		width: 91%;
		margin-top: 20rpx;
		margin-bottom: 15rpx;
		margin-left: 18rpx;
		padding-left: 20rpx;
		border-radius: 20rpx;
		background-color: #F5F6F9;
	}

	.tijiao {
		color: white;
		width: 80%;
		margin-top: 40rpx;
		border-radius: 50rpx;
		background: linear-gradient(to right, #F06C35, #F55661);
	}

	.navBar {
		width: 93%;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 10rpx 0;
		display: flex;
		justify-content: space-around;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 10rpx 8rpx 10rpx rgba(198, 200, 207, 0.8);
	}

	.typeYes {
		color: #E64340;
		font-weight: bold;
	}

	.typeName {
		font-size: 28rpx;
		margin-top: -10rpx;
	}

	.submit {
		margin-top: 20rpx;
	}

	.coreContent {
		width: 82%;
		height: 145rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		padding: 25rpx;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0 0 10px 6px rgba(0, 0, 0, .2);
		line-height: 50rpx;
	}

	.feedback {
		width: 99%;
		/* （文字长度超出限定宽度，则隐藏超出的内容） */
		overflow: hidden;
		/* （设置文字在一行显示，不能换行） */
		white-space: nowrap;
		/* （规定当文本溢出时，显示省略符号来代表被修剪的文本） */
		text-overflow: ellipsis;
	}

	.shenhezt {
		display: flex;
		align-items: center;
		color: #8B8B8B;
		float: right;
	}

	.panduan {
		display: flex;
		align-items: center;
	}

	.tubiao {
		width: 35rpx;
		height: 35rpx;
	}

	.underline {
		margin-left: 10rpx;
		border-bottom: 1px solid #8B8B8B;
	}

	.reply {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 15rpx;
	}
</style>